<template>
 <div class="content">
    <div class="container">
      <div class="header flex-box">
        <div class="doc-toux">
          <div class="doc-img">
            <img src="../assets/img/tx-a001.jpg">
          </div>
          <div class="doc-info">
            <h3>萧芳权</h3>
            <p>遗传咨询师</p>
          </div>
        </div>
        <button class="concern">关注</button>
      </div>
      <div class="desc">
        <p>华大基因遗传咨询师，8年基因医疗健康从业经验，100万华大母婴公众号运营专家，母婴社区达人，奶爸</p>
      </div>
      <div class="desc-info">
        <ul class="flex-box">
          <li><h4>被赞</h4><p>33</p></li>
          <li><h4>已解答问题</h4><p>23</p></li>
          <li><h4>已被旁听</h4><p>98</p></li>
          <li><h4>粉丝</h4><p>23</p></li>
        </ul>
      </div>
      <div class="position">
        <div class="p-left">
          <p><span><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenzheng-dingwei"></use>
            </svg></span>深圳市</p>
        </div>
        <div class="p-right">
          <p><span><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-wenzheng-zhuanfa"></use>
            </svg></span>分享专家</p>
        </div>
      </div>
      <div class="q-lists qestion-list">
        <h3>已公开回答的问题</h3>
        <div class="scroll-box">
          <scroller :on-refresh="refresh" :on-infinite="infinite" ref="article_scroller" :noDataText="noDataText">
            <ul>
              <li v-for="(item,index) in lists" :key="index">
                <h6>{{item.title}}</h6>
                <p v-if="item.audio === false" class="answer-detail">{{item.content}}</p>
                <div v-if="item.audio === true" class="answer-audio">
                  <span><svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-wenzheng-WIFISVG"></use>
                    </svg></span>
                  <p>语音回答</p>
                  <i>51s</i>
                </div>
                <div class="answer-msg">
                  <div class="touxiang"><img :src="require('../assets/img/'+ item.authorImg)"></div>
                  <p class="name">{{item.authorName}}</p>
                  <p class="address">{{item.authorJob}}</p>
                  <p class="state">10元旁听</p>
                </div>
              </li>
            </ul>
          </scroller>
        </div>
      </div>
    </div>
 </div>
</template>

<script>
// @ is an alias to /src
import '../assets/js/iconfont-wenzheng'
import Vue from 'vue'
import ZhuanJia from '../components/IndexZhuanJia.vue'
import TitleBox from '../components/TitleBox.vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  name: 'home',
  data() {
    return {
      navIndex: 0,
      isTitle: false,
      dataAll: '',
      lists: '',
      noDataText: '全部加载完了',
      pageLength: 4,
      pageStart: 1
    }
  },
  components: {
    ZhuanJia,
    TitleBox
  },
  computed: {},
  methods: {
    refresh() {
      this.pageStart = 1
      this.lists = this.dataAll.slice(0, this.pageStart * this.pageLength)
      this.timeout = setTimeout(() => {
        this.$refs.article_scroller.finishPullToRefresh()
      }, 1500)
    },
    infinite() {
      this.timeout = setTimeout(() => {
        this.pageStart++
        this.lists = this.dataAll.slice(0, this.pageStart * this.pageLength)
        if (this.lists.length >= this.dataAll.length) {
          this.$refs.article_scroller.finishInfinite(true)
        } else {
          this.$refs.article_scroller.finishInfinite(false)
        }
      }, 1000)
    }
  },
  created() {},
  mounted() {
    this.$axios
      .get('./data/shanwen-data/jieda-doc01.json')
      .then(res => {
        // console.log(res.data.result)
        this.dataAll = res.data.result
        this.lists = this.dataAll.slice(0, this.pageStart * this.pageLength)
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.container {
  max-width: 750px;
  height: 100%;
  margin: 0 auto;
  background: #f7f7f7;
  .header {
    background: #fff;
    width: 100%;
    height: r(80);
    box-sizing: border-box;
    padding-left: r(15);
    padding-right: r(15);
    justify-content: space-between;
    .doc-toux {
      width: r(240);
    }
    .doc-img {
      width: r(40);
      height: r(40);
      border-radius: 40px;
      overflow: hidden;
      float: left;
      margin-right: r(16);
      img {
        width: 100%;
      }
    }
    .doc-info {
      text-align: left;
      h3 {
        font-size: r(16);
        color: #333333;
        margin-top: r(4);
        line-height: r(16);
      }
      p {
        font-size: r(11);
        color: #999999;
        margin-top: r(8);
        line-height: r(16);
      }
    }
    button.concern {
      width: r(78);
      height: r(30);
      border: none;
      border-radius: 30px;
      color: #fff;
      line-height: r(30);
      padding: 0;
      background: -webkit-linear-gradient(left, #86d1fc, #4ea4f7);
      background: linear-gradient(right, #86d1fc, #4ea4f7);
    }
  }
  .desc {
    background: #fff;
    width: 100%;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    p {
      border-radius: r(8);
      background: #f7f7f7;
      @include setPm(padding, 15, 10, 15, 10);
      font-size: r(12);
      color: #666666;
      line-height: r(22);
    }
  }
  .desc-info {
    background: #fff;
    width: 100%;
    @include setPm(padding, 0, 15, 0, 15);
    box-sizing: border-box;
    ul {
      width: 100%;
      overflow: hidden;
      @include setPm(padding, 18, 0, 12, 0);
      justify-content: space-around;
      border-bottom: 1px solid #eee;
      li {
        text-align: center;
        h4 {
          font-size: r(11);
          color: #999999;
          line-height: r(18);
          margin-bottom: r(6);
        }
        p {
          font-size: r(20);
          color: #6dbbfe;
          line-height: r(24);
        }
      }
    }
  }
  .position {
    background: #fff;
    width: 100%;
    @include setPm(padding, 18, 15, 38, 15);
    box-sizing: border-box;
    border-bottom: 10px #f7f7f7 solid;
    border-bottom-width: r(10);
    .p-left {
      float: left;
    }
    .p-right {
      float: right;
    }
    p {
      font-size: r(12);
      color: #cccccc;
      line-height: r(16);
      span {
        font-size: r(16);
        margin-right: r(6);
      }
    }
  }
  .q-lists {
    background: #fff;
    border-bottom: none;
    h3 {
      width: 100%;
      border-bottom: 1px solid #eee;
      padding-bottom: r(12);
      font-size: r(12);
      color: #999999;
      line-height: r(20);
    }
    ul {
      background: #fff;
      li {
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
.qestion-list {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  box-sizing: border-box;
  height: calc(100% - 298px);
  border-bottom: #f7f7f7 10px solid;
  .scroll-box {
    width: 100%;
    height: calc(100% - 32px);
    position: relative;
  }
  .i-lists {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #eee;
    .swiper-container {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: auto;
        color: #999;
        font-size: 16px;
        margin-left: 16px;
        margin-right: 16px;
        box-sizing: border-box;
        border-bottom: 2px solid #fff;
        &.active {
          color: #6dbbfe;
          border-bottom: 2px solid #6dbbfe;
        }
      }
    }
  }
  ul {
    width: 100%;
    display: block;
    overflow: hidden;
    li {
      width: 100%;
      display: block;
      float: left;
      padding-top: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      h6 {
        font-size: 16px;
        color: #2f2f2f;
        line-height: 25px;
        margin-bottom: 12px;
        margin-top: 12px;
        a {
          color: #2f2f2f;
        }
      }
      .answer-detail {
        font-size: 12px;
        color: #999999;
        line-height: 22px;
      }
      .answer-audio {
        width: 219px;
        height: 36px;
        line-height: 36px;
        border-radius: 200px;
        background: #6dbbfe;
        margin-top: 12px;
        font-size: 14px;
        float: left;
        text-align: center;
        color: #fff;
        span {
          float: left;
          width: 40px;
          font-size: 18px;
        }
        p {
          width: 129px;
          float: left;
          color: #fff;
        }
        i {
          width: 50px;
          float: left;
        }
      }
      .answer-msg {
        width: 100%;
        float: left;
        margin-top: 24px;
        overflow: hidden;
        margin-bottom: 3px;
        .touxiang {
          width: 16px;
          height: 16px;
          border-radius: 50px;
          overflow: hidden;
          float: left;
          margin-right: 6px;
          img {
            width: 100%;
          }
        }
        .name,
        .address,
        .state {
          display: block;
          float: left;
          margin-top: 3px;
          font-size: 11px;
        }
        .name {
          color: #666;
          margin-right: 6px;
          a {
            color: #666;
          }
        }
        .address {
          color: #ccc;
        }
        .state {
          color: #6dbbfe;
          float: right;
          a {
            color: #6dbbfe;
          }
        }
      }
    }
  }
  .check-all {
    width: 100%;
    text-align: center;
    font-size: r(16);
    line-height: r(48);
    border: none;
    background: none;
    outline: none;
    border-top: 1px solid #eee;
  }
  .no-data-show {
    width: 100%;
    height: 200px;
    img {
      width: 140px;
    }
  }
}
.qestion-list-last {
  border-bottom: none;
}
#j_dialog .icon_close {
  width: 40px;
  height: 40px;
}
.foot-btn {
  width: 100%;
  color: #fff;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  line-height: r(50);
  height: r(50);
  position: fixed;
  bottom: 0;
  z-index: 66;
  left: 0;
  background: -webkit-linear-gradient(right, #86d1fc, #4ea4f7);
  background: linear-gradient(left, #86d1fc, #4ea4f7);
  a {
    color: #fff;
  }
}
</style>
